<template>
  <div>
    <!-- 字体渐变和背景图片、文本阴影冲突，用额外一个div显示背景图片和文本阴影 -->
    <div
      class="absolute"
      :style="{
        ...styles,
        backgroundImage: backgroundImage,
        backgroundSize: backShowImage ? '100% 100%' : '0',
        backgroundRepeat: 'no-repeat',
        borderRadius: backRadius + 'px',
        textShadow: textShadowStr,
      }"
    >
      {{ fontText }}
    </div>
    <p
      :style="{
        ...styles,
        position: 'relative',
        zIndex: 10,
        backgroundImage: fontGradient.show
          ? `linear-gradient(${fontGradient.angle}deg, ${fontGradient.fromColor}, ${fontGradient.toColor})`
          : `linear-gradient(${fontColor}, ${fontColor})`,
        '-webkit-background-clip': 'text',
        '-webkit-text-fill-color': fontGradient.show ? 'transparent' : fontColor,
      }"
    >
      {{ fontText }}
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
}
</script>

<style>
title {
  font-size: 20px;
}
</style>
